<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品首页</title>
<!--    <link rel="stylesheet" href="css/main.css">-->
    <link th:href="@{ /css/bootstrap-4.6.2-dist/css/bootstrap.min.css}" rel="stylesheet">
<!--    <link rel="stylesheet" href="../static/css/bootstrap-4.6.2-dist/css/bootstrap.min.css">-->
</head>
<body>
<div class="container">
    <div class="row text-center bg-dark text-light">
        <div class="col-2">
            <img src="/img/market.jpg" alt="Market Image" width="100%">
        </div>
        <div class="col-7">
            <h2>欢迎使用超市管理系统</h2>
        </div>
        <div class="col-2 user-info">
            <span>当前用户:</span>
            <span th:text="${username}"></span>
            <span><a href="/logout">退出</a></span>
        </div>
    </div>
    <div class="row" style="min-height: 400px;">
        <div class="col-2 bg-dark text-light">
            <li>
                <a href="/main"> 管理系统首页</a>
            </li>
            <li>
                <a href="/api/goods"> 商品首页</a>
            </li>
            <li>
                <a href="/suppliers/suppliersList"> 管理供应商模块</a>
            </li>
            <li>
                <a href="/inventory/inventoryList"> 管理库存模块</a>
            </li>
        </div>
        <div class="col-10">
            <div class="row text-center">
                <div class="col-9"></div>
                <div class="col-3">
                    <a href="/api/goodsAdd" class="btn-warning">新增</a>
                </div>

            </div>
            <p>目前现有商品列表</p >
<!--            <p th:text="${data}"></p >-->
            <table class="table table-bordered">
                <thead>
                <th>序号</th>
                <th>商品名</th>
                <th>价格</th>
                <th>数量</th>
                <th>供应商</th>
                <th>管理</th>
                </thead>
                <tbody>
                <tr th:each="goods:${data}">
                    <td th:text="${goods.id}"></td>
                    <td th:text="${goods.name}"></td>
                    <td th:text="${goods.price}"></td>
                    <td th:text="${goods.quantity}"></td>
                    <td th:text="${goods.supplier}"></td>
                    <td>
                        <button class="btn btn-danger" th:onclick="del([[${goods.getId()}]])">删除</button>
                        <button class="btn btn-info" th:onclick="update([[${goods.getId()}]])">更新</button>

                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="row text-center bg-black footer">
        @2023-2025 版权所有，违法必究
    </div>
</div>


<!--<p>这是系统管理首页，欢迎登录</p >-->
<!--<tr th:each="user:${data}">-->
<!--    <td th:text="${user.name}"></td>-->
<!--    <td th:text="${user.password}"></td>-->
<!--</tr>-->
</body>
</html>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
    function del(id){
        var flag = confirm("是否删除这个记录？");
        if (flag == true){
            //     jquery的post方法ajax方法
            $.post("/api/goodsDelete",{"id":id},function(res){
                console.log(res)
                if (res==1){
                    alert("删除成功");
                    location.reload();
                }else {
                    alert("删除失败");
                }
            })
        }

    }
    function update(id){
        var flag = confirm("是否更新这个记录？");
        if(flag==true){
            location.href="/api/goodsUpdate?id="+id;
        }
    }
</script>